<!doctype html>
<html>
<head>
    <meta />
    <title>学习vue第二部分</title>
    <script src="js/jquery-3.1.0.min.js"></script>
    <script src="js/vue.js"></script>
    <script>
        
        //全局组件
        //定义组件
        var myConponent = Vue.extend({template:"<div>A custom component 我自定义的组件</div>"});
        //注册组件，这样就可以在html文本中使用<my-component></my-component>标签渲染组件内容
        Vue.component("my-component",myConponent); 
        
        //局部组件
        var child = Vue.extend({template:"<h1><a href='http://www.baidu.com' target='_blank' >百度,局部组件</a></h1>"});
        var parent = Vue.extend({
            props:{msg:String,level:{type:Number,default:11}}, //设置属性数据
            template:"<my-child></my-child><p>{{msg}} {{level}}级的好家伙 </p>", //局部组件只能在父组件的模板内
            components:{"my-child":child},//定义局部组件
        });
        Vue.component("my-parent",parent); 
        
        //定义和注册组件一步完成;注意template关键字
        Vue.component("my-cpt",{template:"<p>定义和注册组件一步完成</p>"});
        
        var args = {
            el:"#app",
            data:{
                msg:"wellcome to vue",
                checked:false,
                show:true,
                transitionName:'expand',
            },
            methods:{                
                clickBtn:function (evt){
                    this.show = !this.show;
                    this.msg = this.msg+"_哈哈";
                }, //end of clickBtn
            },
            computed:{
            },
        }
        $(function (){
            var vm = new Vue(args);
            
            //设置过渡动画钩子
            Vue.transition('expand', {
              beforeEnter: function (el) {
                el.textContent = 'beforeEnter'
              },
              enter: function (el) {
                el.textContent = 'enter'
              },
              afterEnter: function (el) {
                el.textContent = 'afterEnter'
              },
              enterCancelled: function (el) {
                // handle cancellation
              },
              beforeLeave: function (el) {
                el.textContent = 'beforeLeave'
              },
              leave: function (el) {
                el.textContent = 'leave'
              },
              afterLeave: function (el) {
                el.textContent = 'afterLeave'
              },
              leaveCancelled: function (el) {
                // handle cancellation
              }
            })
            
            
        }) //end of load
    </script>
    <style>
    
        .expand-transition{
            transition:all 0.3s;
            background-color:#cccccc;
            width:200px;
            height:50px;
            opacity:1;
        }
        .expand-transition:hover{
            background-color:#00cccc;
            height:60px;
            opacity:0.3;
        }
        
        /*
            enter 和leave状态 
            
            在这个例子中,当expand过渡开始执行后,
            enter状态是从opacity:0; height:0px;(enter前的状态)
                然后进入到height:50px;opacity:1;(enter后的状态)的状态 从而实现了过渡效果
            leave状态是从height:50px;opacity:1;(leave前的状态)
                然后进入到opacity:0; height:0px;(leave后的状态)的状态 从而实现了过渡效果
            
        */        
        .expand-enter,.expand-leave{            
            opacity:0;
            height:0px;            
        }
               
    </style>
</head>

<body>
    <div id="app">
        <!-- v-model指令的表单控件绑定,不同的控件 指令是针对不同的属性值-->
        <span>Message is: {{ msg }}</span>
        <br>
        <input type="text" v-model="msg" placeholder="edit me">
        <input type="checkbox" id="checkbox" v-model="checked">
        <label for="checkbox">{{ checked }}</label><br>
        
        <!--vue过渡  如果 transition 特性没有值，类名默认是 .v-transition, .v-enter 和 .v-leave -->
        <div class="msg" v-if="show" transition="expand" >过渡动画!</div>        
        <button @click="clickBtn" >toggle</button>
        <button v-on:click="clickBtn" >test</button>
        
        <!--自定义组件-->
        <my-component></my-component>       
        <!--自定义的属性数据,以属性形式写 实际是数据-->
        <!--属性绑定到父的msg属性 --> <!-- :level="101" 传递实际的数字  -->
        <my-parent :msg="msg" :level="101" ></my-parent> <!-- 进度->props验证 -->
        <my-cpt></my-cpt>
        
    </div>

</body>

</html>
